import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import.meta.glob 能否使用 defineAsyncComponent 进行异步加载
// import { defineAsyncComponent } from 'vue'

// const views = import.meta.glob('@/views/**/*.vue', { eager: true })
// console.log(views)

type CusRouteRecordRaw = RouteRecordRaw & {
  cmpName: string
}

const routes: CusRouteRecordRaw[] = [
  {
    cmpName: '主页',
    path: '/',
    name: 'HomeView',
    component: () => import('../views/HomeView.vue'),
  },
  {
    cmpName: '关于',
    path: '/AboutView',
    name: 'AboutView',
    component: () => import('../views/AboutView.vue'),
  },
  {
    cmpName: '编辑器',
    path: '/EditorView',
    name: 'EditorView',
    component: () => import('../views/EditorView.vue'),
  },
  {
    cmpName: '拖动组件',
    path: '/DraggableView',
    name: 'DraggableView',
    component: () => import('../views/DraggableView.vue'),
  },
  {
    cmpName: 'ts反射',
    path: '/TsReflection',
    name: 'TsReflection',
    component: () => import('../views/TsReflection.vue'),
  },
  {
    cmpName: '拖拽功能验证',
    path: '/EditorDragVaildVue',
    name: 'EditorDragVaildVue',
    component: () => import('../views/EditorDragVaildVue.vue'),
  },
  {
    cmpName: '表格组件验证',
    path: '/TableView',
    name: 'TableView',
    component: () => import('../views/TableView.vue'),
  },
  {
    cmpName: '虚拟表格验证',
    path: '/Table2View',
    name: 'Table2View',
    component: () => import('../views/Table2View.vue'),
  },
  {
    cmpName: '多个时间段',
    path: '/MultipleTimePeriodRangesView',
    name: 'MultipleTimePeriodRangesView',
    component: () => import('../views/MultipleTimePeriodRangesView.vue'),
  },
  {
    cmpName: '注入尝试',
    path: '/InjectView',
    name: 'InjectView',
    component: () => import('../views/InjectView.vue'),
  },
  {
    cmpName: '表单校验',
    path: '/FormValidView',
    name: 'FormValidView',
    component: () => import('../views/FormValidView.vue'),
  },
  {
    cmpName: '动态组件',
    path: '/DynamicView',
    name: 'DynamicView',
    component: () => import('../views/DynamicView.vue'),
  },
  {
    cmpName: '快速选择时间',
    path: '/QuickDatePicker',
    name: 'QuickDatePicker',
    component: () => import('../views/QuickDatePicker.vue'),
  },
  {
    cmpName: '数组对象表单项',
    path: '/FormItemArrObject',
    name: 'FormItemArrObject',
    component: () => import('../views/FormItemArrObject.vue'),
  },
  {
    cmpName: '定时器',
    path: '/TimerView',
    name: 'TimerView',
    component: () => import('../views/TimerView.vue'),
  },
  {
    cmpName: '消息弹窗',
    path: '/MessageView',
    name: 'MessageView',
    component: () => import('../views/MessageView.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
})

export default router

export { routes }
